<template>
    <div>
        <nut-demoheader 
        :name="$route.name"
        ></nut-demoheader>
        <h5>示例</h5>
        <p>优惠券展示：京券</p>
        <nut-coupon :datas="beanData[0]" @immediate-use="immediateUse"></nut-coupon>
        <p>优惠券展示：东券</p>
        <nut-coupon :datas="beanData[1]" @immediate-use="immediateUse"></nut-coupon>
        <p>优惠券展示：运费券</p>
        <nut-coupon :datas="beanData[2]" @immediate-use="immediateUse"></nut-coupon>
        <p>优惠券展示：不可用券</p>
        <nut-coupon :datas="beanData[3]" @immediate-use="immediateUse"></nut-coupon>
        <p>切换状态</p>
        <nut-coupon :datas="beanData[0]" :is-switch="true" @switch-use="switchUse"></nut-coupon>
        <br>
        <nut-coupon :datas="beanData[3]" :is-switch="true" @switch-use="switchUse"></nut-coupon>
        <p>有活动角标</p>
        <nut-coupon :datas="beanData[0]" :is-switch="true" @switch-use="switchUse" :is-badge="true"></nut-coupon>
    </div>
</template>
<script>
export default {
    data(){
        return{
          beanData: [
              {
                  'id': 1,
                  'discount': 100,
                  'quota': 400,
                  'couponType': 0,
                  'couponLimitInfo': '限自营好丽友商品',
                  'beginTime': '2015.07.07',
                  'endTime': '2015.07.07',
                  'isUsed': true
              },
              {
                  'id': 2,
                  'discount': 10,
                  'quota': 60,
                  'couponType': 1,
                  'couponLimitInfo': '限自营盼盼品牌部分饼干类商品',
                  'beginTime': '2015.07.07',
                  'endTime': '2015.07.07',
                  'isUsed': true
              },
              {
                  'id': 3,
                  'discount': 10,
                  'quota': 400,
                  'couponType': 2,
                  'couponLimitInfo': '限自营好丽友、盼盼品牌部分饼干类商品',
                  'beginTime': '2015.07.07',
                  'endTime': '2015.07.07',
                  'isUsed': true
              },
              {
                  'id': 4,
                  'discount': 10,
                  'quota': 400,
                  'couponType': 1,
                  'couponLimitInfo': '限自营好丽友、盼盼品牌部分饼干类商品',
                  'beginTime': '2015.07.07',
                  'endTime': '2015.07.07',
                  'isUsed': false
              }
          ]
        }
    },
    methods:{
        immediateUse(datas){
            console.log('立即使用,数据如下：' + JSON.stringify(datas));
        },
        switchUse(datas, isChecked) {
            console.log('是否选中：' + isChecked);
        }
    }
}
</script>

<style>
    .nut-coupon-badge{
        background-image: url();
    }
</style>
